<template>
  <el-pagination @current-change="pageChange"
                 :current-page="pageNo"
                 background=""
    layout="prev, pager, next"
    :total="page_max*10">
  </el-pagination>
</template>

<script>
    export default {
      name: "PageBar",
      data() {
        return {
          page_max: 4,
          pageNo: 1,
        }
      },

      created() {
        this.get_page()
        this.pageNo = Number(localStorage.getItem('pagination')) || 1;
        this.pageChange(this.pageNo);
      }

      ,beforeUpdate () {
        localStorage.setItem('pagination', this.pageNo);
      },

      beforeDestroy () {
        localStorage.setItem('pagination', '1');
      }

      , methods: {
        get_page:function(){
          let this_ = this
          this_.$axios.get('http://127.0.0.1:8080/dongzuo/account', {
            params: {
              search: this_.$store.state.search,
              qixie: this_.$store.state.apparatus_type,
              body_part: this_.$store.state.body_type,
              grade: this_.$store.state.grade_type,
            }
          })
            .then(function (response) {
              if(response.data){
              this_.$store.state.action_num = response.data
              this_.page_max = Math.ceil(this_.$store.state.action_num[0].num / 12)}
            })
        },
        pageChange (pageNo) {
          this.pageNo = pageNo;
          this.$store.state.page_index=this.pageNo
          this.get_dongzuo()
        },
        get_dongzuo: function () {
          let this_ = this
          this_.$axios.get('http://127.0.0.1:8080/dongzuo/dongzuoshipin', {
            params: {
              search: this_.$store.state.search,
              qixie: this_.$store.state.apparatus_type,
              body_part: this_.$store.state.body_type,
              grade: this_.$store.state.grade_type,
              page_index: this_.$store.state.page_index,
            }
          })
            .then(function (response) {
              this_.$store.state.action = response.data
            })
        },
      }
      ,computed: {
        action() {
          return this.$store.state.action
        }
      },
      watch: {
        action: function () {
          this.get_page()
        }
      }
    }
</script>

<style scoped>

</style>
